<style scoped>
    .title, .author,.content{
        margin: 10px
    }
</style>
<template>
    <div>
        <Row style="margin:5px 0px 10px 5px">
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>

            <i-col span="3" >
                <Button  size="default"  @click="btn_add_pressure_data">新增压力数据</Button>
            </i-col>
        </Row>

        <!-- 列表区域 -->
        <i-table size="default"   border stripe :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="primary"   style="margin-bottom: 5px;margin-right:5px;"  @click="btn_edit_pressure_data(index)">编辑</Button>
                <!-- <Button  size="default"  type="error" size="default"    @click="del_post(index)">删除</Button> -->
            </template>
        </i-table >
        <!-- 分页区域 -->
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 新增压测数据模态框 -->
        <Modal v-model="show_add_modal" width="1000" draggable> 
            <p slot="header" style="color:#f60;text-align:center">
                <span>添加压测数据</span>
            </p>
            <div >
                <Form ref="pressure_data" :model="pressure_data" :rules="pressure_data_rules" label-position="left"  :label-width="120" inline>
                    <Form-Item label="压测id:"  prop="pid">
                        <Input type="text"  v-model="pressure_data.pid"  @on-change="change_pid"/>
                    </Form-Item> 
                    <Form-Item label="压测名字" prop="pname">
                        <Input type="text"  v-model="pressure_data.pname" disabled />
                    </Form-Item> 
                    <Form-Item label="压测项目" prop="name">
                        <Input type="text"  v-model="pressure_data.name" />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button  size="default"  type="primary"   @click="submit_add_pressure_data('pressure_data')">提交</Button>
            </div>
        </Modal>
    
        <!-- 编辑压测数据模态框 -->
        <Modal v-model="show_edit_modal" width="1000" draggable> 
            <p slot="header" style="color:#f60;text-align:center">
                <span>编辑压测数据</span>
            </p>
            <div >
                <Form ref="pressure_data_edit" :model="pressure_data_edit" :rules="pressure_data_edit_rules" label-position="left"  :label-width="120" inline>
                    <Form-Item label="压测id:"  prop="pid">
                        <Input type="text"  v-model="pressure_data_edit.pid"  @on-change="change_pid"/>
                    </Form-Item> 
                    <Form-Item label="压测名字" prop="pname">
                        <Input type="text"  v-model="pressure_data_edit.pname" disabled />
                    </Form-Item> 
                    <Form-Item label="压测项目" prop="name">
                        <Input type="text"  v-model="pressure_data_edit.name" />
                    </Form-Item> 
                    <Form-Item label="并发用户/线程" prop="parallel">
                        <Input type="text"  v-model="pressure_data_edit.parallel"  />
                    </Form-Item> 
                    <Form-Item label="请求数" prop="request_num">
                        <Input type="text"  v-model="pressure_data_edit.request_num"  />
                    </Form-Item> 
                    <Form-Item label="数据长度" prop="data_length">
                        <Input type="text"  v-model="pressure_data_edit.data_length"  />
                    </Form-Item> 
                    <Form-Item label="额外信息:"  prop="other">
                        <Input type="textarea"  :autosize="{minRows: 2,maxRows: 3}" style="overflow: auto;width: 800px"  v-model="pressure_data_edit.other" />
                    </Form-Item> 
                    <Form-Item label="压测数据:" prop="pdata">
                        <MyEditor  ref='myEditor' v-model="pressure_data_edit.pdata"   :defaultContent="pressure_data_edit.pdata" style="height:450px; width: 800px"></MyEditor>

                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button  size="default"  type="primary"   @click="submit_edit_pressure_data('pressure_data_edit')">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
// import axios from 'axios'
import { post }  from '@/api/http'
import { 
    pressure_data_list,
    get_pressure_name,
    pressure_data_update,
    pressure_data_add,
} from  '@/api'
import store from '@/store'
import MyEditor from '@/lib/editor/myEditor';
import { show_simple_page } from '@/common/util'
export default {
    components:{
        MyEditor
    },
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '数据序号',key: 'id',
                    render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: 'blue'
                                },
                                on: {
                                    click: ()=>{                    
                                        this.handleLink(params);
                                    }
                                }
                            },params.row.id)
                        ])
                    }
                },
                {
                    title: '测试项目',key: 'name'
                },
                {
                    title: '压测名称',key: 'pname'
                },
                {
                    title: '并发',key: 'parallel'
                },
                {
                    title: '请求数',key: 'request_num'
                },
                {
                    title: '测试数据大小',key: 'data_length'
                },
                {
                    title: '数据内容', key: 'pdata',
                    render: (h, params) => {
                        // bug pdata为空slice会报错
                        let texts = '';
                        if(params.row.pdata == null){
                            texts = null
                        }else{
                            texts = params.row.pdata.slice(0,50)
                        }
                        return h('div',{style:{'overflow':'auto',}}, [
                            h('p', texts)
                        ]);
                    }
                },


                {
                    title: '额外信息',key: 'other'
                },

                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',align: 'center',width: 200,
                }
            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 30,
            // 新增
            show_add_modal: false,
            pressure_data: {
                pid: 0,
                pname: '',
                name: '',
                // parallel: '',
                // request_num: '',
                // data_length: '',
                // other: '',
                // pdata: '',
            },
            pressure_data_rules:{

            },

            // 编辑数据
            pressure_data_edit: {
                pid: 0,
                pname: '',
                name: '',
                parallel: '',
                request_num: '',
                data_length: '',
                other: '',
                pdata: '',
            },
            // ptype_list:['基准测试','模拟测试'],
            show_edit_modal: false,
            pressure_data_edit_rules:{

            },
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        handleLink(params){
            const { href } = this.$router.resolve({
                path: '/pressureDataDetail'
            });
            window.open(href+"?id="+params.row.id, '_blank');
        },
        // 编辑数据
        submit_edit_pressure_data(name){
            console.log(name)
            let pressure_data = this.pressure_data_edit
            let data = {'pressure_data':pressure_data}
            post(pressure_data_update,data).then( response => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.show_edit_modal = false
                    this.refresh()
                }else {
                    alert("更新失败:",info)
                }
            })
        },
        btn_edit_pressure_data(index){
            let pressure_data =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.pressure_data_edit = pressure_data
            this.show_edit_modal=true
        },
        // 新增压测数据改变压测id获取压测name
        change_pid(){
            // alert(this.menu.parent_id)
            let pid = parseInt(this.pressure_data.pid)
            let data = {"pid":pid}
            post(get_pressure_name,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('fail') != -1) {
                    this.$Message.error("查无此压测配置")
                }else {
                    this.pressure_data.pname = response.data
                }
            })
        },
        // 保存压测数据
        submit_add_pressure_data(name){
            console.log(name)
            let pressure_data = this.pressure_data
            let data = {'pressure_data':pressure_data}
            post(pressure_data_add,data).then( response => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:",info)
                }
            })
        },
        // 
        btn_add_pressure_data(){
            this.show_add_modal = true
        },
        refresh() {
            post(pressure_data_list).then( (response) => {
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
